<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改个人信息</title>
 <!-- Bootstrap core CSS -->
    <link href="../css/coach/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="../css/coach/sb-admin.css" rel="stylesheet">
    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="../css/coach/morris-0.4.3.min.css">
	 <link rel="stylesheet" href="../layui/css/layui.css">
  	<link rel="import" href="../jsp/toolbar.jsp" id="head"> 
  	 <script type="text/javascript" src="../layui/layui.js"></script>
  	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rsi8ehEBjC2RV6a6Nbgwt7e0RjSv8lRH"></script>
	  <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../js/data.js"></script>
    <script type="text/javascript" src="../js/province.js"></script>
	 	
	  <style>
		  	#all{
		  	width: 1000px;
		  	height: 80%;
		  	position: absolute; left: 50%; top: 50%;
		  	text-align: center;
		  	transform: translate(-50%, -50%);		
		  }
		  
		  
		  .myForm{
			margin: 0;
			padding: 0;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			box-sizing: border-box;
			display: block;
			font-size: 15px;
			color: olive;
			text-align: center;
			line-height: 24px;
			font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
    
		  }
		  body{
		  	background-image: url(../images/top.jpg);
		  	background-position: 100% 100%;
		  	background-attachment: fixed;
		  	background-repeat: no-repeat;
		  	background-size: cover; -moz-background-size: cover; 
		  }  
		  #headFrame{
			  width: 150px;
			  height: 150px;
			  border: 1px solid #000000;
			  position: absolute; left: 50%; top: 5%;
			  background-size: cover;
			  background-repeat: no-repeat;
		  }
		  #headDiv{
		  		width:80px;
		  		height: 50px;
		  		position: absolute; left: 65%; top: 28%;
		  }
		 .message{
			width: 70%;
			height: 220%;
			border: #000000 solid 1px;
			position: absolute;
			top: 40%;
			left: 20%;
			font-size: 15px;
			color: olive;
			text-align: center;			
		} 
		#allmap {
		width: 600px;
		height: 300px;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
		text{
			padding-top:5px;
		}
		input {
		margin-bottom: 5px;
}
	  </style>
	<script>
		layui.use('form', function(){
 		 var form = layui.form;
		});
	</script>
</head>
<body>
<script type="text/javascript">
		document.write(head.import.body.innerHTML);
		</script>
		<div id="all">	
			 <!-- 头像 -->
			<div id="headFrame" style="border:0">
			<img src="" width="150px" height="150px" id="my-img"/>		
			</div>
			<div id="headDiv">
			<form id="headForm"  enctype="multipart/form-data" method="post">
			<input type="file" name="headImage" onchange="upload()" id="img-upload" style="display: none">
			</form>			
			</div>
	<div class="message">	
	<form class="layui-form layui-form-pane" id="formMessage">
	<div id="updateMessage"></div>
		<div class="layui-form-item" >
		<div class="layui-input-inline">省：<select name="provid" id="provid" lay-filter="provid"><option value="">请选择省</option></select></div>
		<div class="layui-input-inline">市：<select name="cityid" id="cityid" lay-filter="cityid"><option value="">请选择市</option></select></div>

		<div class="layui-input-inline">区：<select name="areaid" id="areaid" lay-filter="areaid"><option value="">请选择县/区</option></select></div></div>

		

		<div id="allmap"></div>
	<div id="myMessage" style="margin-top: 50px"></div>
</form>

 </div>

 </div>
 
	  <script>
	  //Demo
	  layui.use('form', function(){
	    var form = layui.form;	    
	    form.render(); 
	  });

	//地图上获取地址
		var selectAddress=""
		// 百度地图API功能
		$(window).scrollTop(0);
		var map = new BMap.Map("allmap");    // 创建Map实例
		map.centerAndZoom(new BMap.Point(104.07, 30.67), 13);  // 初始化地图,设置中心点坐标和地图级别
		//添加地图类型控件
		map.addControl(new BMap.MapTypeControl({
			mapTypes:[
		        BMAP_NORMAL_MAP,
		        BMAP_HYBRID_MAP
			]}))
		map.setCurrentCity("成都");
		map.enableScrollWheelZoom(true);         //启用滚轮缩放

		var geoc = new BMap.Geocoder();    
		map.addEventListener("click", function(e){        //监听地图点击事件
			map.clearOverlays();     //清除当前地图上存在的点
			//alert(e.point.lng + "," + e.point.lat);  //获取点击地区经纬度坐标
			var point2 = new BMap.Point(e.point.lng, e.point.lat);
			map.addOverlay(new BMap.Marker(point2));   //在点击的位置放置点
			var pt = e.point;
			geoc.getLocation(pt, function(rs){
				var addComp = rs.addressComponents;
				//获取点击的地址信息,是以[Object,Object]形式
				//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				//selectAddress即为拼接出来的在地图上点击的最终地址
				selectAddress=addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber;
				
				  showMessage(); 
			});        
		});
		$(document).ready(function(){
			showMessage();
			$('#headFrame').click(function(){
		        $('#img-upload').click();
		    });
			layui.use(['form','element','jquery','layer'], function(){
				form.on('select()',function(data){
					//alert($("#provid option:selected").text()+$("#cityid option:selected").text()+$("#areaid option:selected").text());
					form.render();
					var address=$("#provid option:selected").text()+$("#cityid option:selected").text()+$("#areaid option:selected").text();
					//alert(address);
					// 创建地址解析器实例     
					var myGeo = new BMap.Geocoder();      
					// 将地址解析结果显示在地图上，并调整地图视野    
					myGeo.getPoint(address, function(point){      
						if (point) {      
							map.centerAndZoom(point, 18);      
							//map.addOverlay(new BMap.Marker(point));      
						}      
					 }, 
					 $("#cityid option:selected").text());
				})
			});

		})	
		//教练加载信息
		//地址
		
		function showMessage(){
			$.ajax({
				url:"/vi_user_coach/selectByUid",
				type:"post",
				success:function(data){
					// 改变头像图片源
					if (data.headImage == ""||data.headImage==null) {
						//设置默认头像图片
						$("#my-img").attr("src", "/images/滑稽.png");
						}
					else{
					$("#my-img").attr("src", "/images/" + data.headImage);
					}
					if(data.nickName==null ||data.nickName==""){
						data.nickName="未知";
					}
					if($("input[name='nickName']").val()!=null && $("input[name='nickName']").val()!=""){
							data.nickName=$("input[name='nickName']").val();
					}
					
					if(data.cname==null ||data.cname==""){
						data.cname="未知"
					}
					if($("input[name='cname']").val()!=null && $("input[name='cname']").val()!=""){
							data.cname=$("input[name='cname']").val()
					}
					
					if($("input[name='csex']").val()!=null && $("input[name='csex']").val()!=""){
							data.csex=$("input[name='csex']:checked").val()
					}
					
				   
					if(data.cage==null|| data.cage==""){
						data.cage="0"
					}
					
					if($("input[name='csex']").val()!=null &&$("input[name='cage']").val()!=""){
							data.cage=$("input[name='cage']").val()
					}
					if(data.time==null||data.time==""){
						data.time="未知"
					}
					if($("input[name='time']").val()!=null && $("input[name='time']").val()!=""){
							data.time=$("input[name='time']").val()
					}
					if(data.price==null||data.price==""){
						data.price="0"
					}
					if($("input[name='price']").val()!=null && $("input[name='price']").val()!=""){
						data.price=$("input[name='price']").val();
						
					}
					if(data.style==null|| data.style==""){
						data.style="未知"
					}
					if($("input[name='style']").val()!=null&& $("input[name='style']").val()!=""){
						data.style=$("input[name='style']").val();
					}
				
					if($("#level").val()!=null && $("#level").val()!=""){
						data.publicLevel=$("#level").val()
				
					}
					
					if(data.publicLevel==0){
						data.publicLevel="所有人可见"
					}
					if(data.publicLevel==1){
						data.publicLevel="仅好友可见";
					}
					if(data.publicLevel==2){
						data.publicLevel="私密(仅自己可见)"
					}
					
					if($("input[name='authentication']").val()!=null && $("input[name='authentication']").val()!=""){
						data.authentication=$("input[name='authentication']:checked").val()
					}
			
					if(data.address==null||data.address==""){
						data.address="未知"
					}
					 if(selectAddress!=null &&selectAddress!=""){
						 data.address=selectAddress; 
					} 
					if(data.content==null ||data.content==""){
						data.content="未知"
					}
					if($("textarea[name='content']").val()!=null&&$("textarea[name='content']").val()!=""){
							data.content=$("textarea[name='content']").val()
					}
					
					if(data.cintroduction==null ||data.cintroduction==""){
						data.cintroduction="未知"
					}
					if($("textarea[name='cintroduction']").val()!=null &&$("textarea[name='cintroduction']").val()!=""){
							data.cintroduction=$("textarea[name='cintroduction']").val()
						
					}
					// 通过改变 text的value值来显示的信息
					var val=""
					var content ='<div class="layui-form-item" style="font-size: 20px; text-align: center" >基本信息</div>';
					var nickName ='<label class="layui-form-label" ">昵称</label>'
						+'<div class="layui-input-inline">'
					    +'<input type="text" name="nickName"  required lay-verify="required" value="'+data.nickName+'"  autocomplete="off" class="layui-input">'		
						+'</div>'
					var cname ='<label class="layui-form-label" >真实姓名</label>'
						+'<div class="layui-input-inline">'
					    +' <input type="text" name="cname" value="'+data.cname+'"  required lay-verify="required"  autocomplete="off" class="layui-input">'		
						+'</div>';
						var sex='';
					if(data.csex=='男'){	
					 sex='<div class="layui-form-item" >'
						    +'  <label class="layui-form-label">性别</label>'
							+'<div class="layui-input-block" style="text-align: left; color: black" id="sex">'
						    + ' <input type="radio" name="csex" value="男" title="男"  checked/>'
							 + '<input type="radio" name="csex" value="女" title="女"  />'
							+'</div></div>'
							
					}else{
						 sex='<div class="layui-form-item" >'
							    +'  <label class="layui-form-label">性别</label>'
								+'<div class="layui-input-block" style="text-align: left; color: black" id="sex">'
							    + ' <input type="radio" name="csex" value="男" title="男"  />'
								 + '<input type="radio" name="csex" value="女" title="女"  checked/>'
								+'</div></div>'	
							
					}
				
					var cage='<label class="layui-form-label" >年龄</label><div class="layui-input-inline" >'
					  		+'<input type="text" name="cage" value="'+data.cage+'"  required lay-verify="required"  autocomplete="off" class="layui-input"></div>'		 
					var time='<label class="layui-form-label" >上课时间</label>'
						+'<div class="layui-input-inline" >'
						+'<input type="text" name="time" value="'+data.time+'"  required lay-verify="required"  autocomplete="off" class="layui-input"></div>';
					  
					var price ='<label class="layui-form-label">课程价格</label>'
							+'<div class="layui-input-inline">'
							+'<input type="text" name="price" value="'+data.price+'"  required lay-verify="required"  autocomplete="off" class="layui-input"></div>'
					var style='<label class="layui-form-label">瑜伽流派</label>'
					  	+'<div class="layui-input-inline">'
					  	+'<input type="text" name="style" value="'+data.style+'"  required lay-verify="required"  autocomplete="off" class="layui-input"></div> '
					var course='<div class="layui-form-item ">'
					    +'<label class="layui-form-label">课程内容</label>'
					    +'<div class="layui-input-inline" style="width: 70%;">'
					     +' <textarea name="content" class="layui-textarea">'+data.content+'</textarea>'
					   +' </div></div>'
					var publicLevel=""
					if(data.publicLevel=="仅好友可见"){
						publicLevel=' <div class="layui-form-item">'
					   +'<label class="layui-form-label">信息级别</label>'
					   +'<div class="layui-input-block" style="text-align: left; color: black" >'
						+'<select name="publicLevel" lay-verify="required" style="width: 100px" id="level">'
						+'<option value="0">公开(所有人可见)</option>'
						+'<option value="1" selected>好友可见</option>'
						+'<option value="2">私密(仅自己可见)</option>'
						+'</select>'
					 	+'</div></div>'
					}
					if(data.publicLevel=="所有人可见"){
						publicLevel=' <div class="layui-form-item">'
					   +'<label class="layui-form-label">信息级别</label>'
					   +'<div class="layui-input-block" style="text-align: left; color: black" >'
						+'<select name="publicLevel" lay-verify="required" style="width: 100px" id="level">'
						+'<option value="0" selected>公开(所有人可见)</option>'
						+'<option value="1" >好友可见</option>'
						+'<option value="2">私密(仅自己可见)</option>'
						+'</select>'
					 	+'</div></div>'
					}
					if(data.publicLevel=="私密(仅自己可见)"){
					publicLevel=' <div class="layui-form-item">'
					   +'<label class="layui-form-label">信息级别</label>'
					   +'<div class="layui-input-block" style="text-align: left; color: black" >'
						+'<select name="publicLevel" lay-verify="required" style="width: 100px" id="level">'
						+'<option value="0" >公开(所有人可见)</option>'
						+'<option value="1" >好友可见</option>'
						+'<option value="2" selected>私密(仅自己可见)</option>'
						+'</select>'
					 	+'</div></div>'
					}					
					 var authentication="";
				
					 if(data.authentication==0){	
					 authentication ='<div class="layui-form-item" >'
					   +' <label class="layui-form-label">认证</label>'
					   +'<div class="layui-input-block" style="text-align: left; color: black">'
					   +' <input type="radio" name="authentication" value="0" title="未认证" checked/>'
					   +'<input type="radio" name="authentication" value="1" title="场馆认证" />'
					  +'</div></div> '
					  }else{
						  authentication = '<div class="layui-form-item" >'
						   +' <label class="layui-form-label">认证</label>'
						   +'<div class="layui-input-block" style="text-align: left; color: black">'
						   +' <input type="radio" name="authentication" value="0" title="未认证" />'
						   +'<input type="radio" name="authentication" value="1" title="场馆认证" checked/>'
						  +'</div></div> '
					  }
					var address='<div class="layui-form-item" id="address">'
						+' <label class="layui-form-label">地址</label>'
						+'<div class="layui-input-inline" style="width: 50%;">'
						+'<input type="text" name="address" value="'+data.address+'"  required lay-verify="required"  autocomplete="off" class="layui-input">'					 
						+'</div></div> '
						
					var cintroduction ='<div class="layui-form-item ">'
					    +'<label class="layui-form-label">自我介绍</label>'
					    +'<div class="layui-input-inline" style="width: 70%;">'
					     +' <textarea name="cintroduction"   class="layui-textarea">'+data.cintroduction+'</textarea>'
					   +' </div></div>'		
					var botton='<div class="layui-form-item">'
					    +'<div class="layui-input-block">'
					    +'<input type="button" class="layui-btn" onclick="send()" value="修改信息">'
					    +'<button type="reset" class="layui-btn layui-btn-primary">重置</button>'			    
					    +'</div></div>'				
						
					content+='<div class="layui-form-item">'+nickName
					+cname+'</div>'
					+sex		
					+'<div class="layui-form-item">'+cage+time+'</div>'
					+'<div class="layui-form-item">'+price+style+'</div>'
					+course+publicLevel+address
					val=cintroduction+botton

					$("#updateMessage").html(content)	
					$("#myMessage").html(val)
					  layui.use('form', function(){
						    var form = layui.form;	    
						    form.render(); 
						  });
				}	
			});
		}
		 	
		function send(){
			 $.ajax({
		   	  url:"/vi_user_coach/updateCoach",
		   	  type:"post",
		   	  data:$("#formMessage").serialize(), 
		   	  success:function(data){
		   		  alert(data);
		   		  location.href="/html/coachBasic.html";
		   	  }	  
		     });
		}

		//上传头像
		function upload() {  
		    var formData = new FormData($("#headForm")[0]);  
		    $.ajax({    
		        url: '/user/head' ,
		        type: 'POST',
		        data: formData,
		        async: false,
		        cache: false,
		        contentType: false,
		        processData: false,
		        success: function (data) {       	
		        	$("#my-img").attr("src",  data);

		        },
		    });
		}
	  </script>	
</body>
	 
</html>